import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import {ArticleApi,ArticleEdit} from '../request/api'
import {Pagination,Divider, Tag,List, Skeleton, Button, message} from 'antd'
import {useNavigate} from "react-router-dom"
import moment from 'moment'
import "../assets/index.less"

export default function ListArticle() {
    const navigate=useNavigate()
    var chars=['#d7d7a6','#99ff33','#99ffcc','#808080','#ff9999','#FFB90F','#FF83FA','#FF82AB','#FF7F00','#FF69B4','#EE7AE9','#EE7600','#B452CD','#9ACD32','#CAFF70','#9966ff'];
    function generateMixed(){
        var colors="";
        var i =Math.ceil(Math.random()*10)
        colors=chars[i];
        return colors;
        
        }
    function viewArticle(articleId){
        ArticleEdit()
    }
    const [list, setList] = useState([])
    const [update, setUpdate] = useState(1)
    const [total, setTotal] = useState(0)
    const [current, setCurrent] = useState(1)
    const [summary,setSummary]=useState()
    const [pageSize, setPageSize] = useState(6)

  // 请求封装
  const getList = (num) => {
    ArticleApi({
      params:{
      size:pageSize,
      page: num}
    }).then(res => {
      if (res.code === 200) {     
        setList(res.data.list);
        setTotal(res.data.total);
        setSummary(res.data.list.summary)
        setCurrent(res.data.pageNum);
        //setPageSize(count);
      }
     else if(res.code===90002){
        message.error("登录过期，正在跳转登录页！")
        setTimeout(()=>navigate('/login'),1500)
      }
      else{
        message.error("请求超时！")
      }
    })
  }

  // 请求列表数据  componentDidMount
  useEffect(() => {
    getList(current)
  }, [])

  // 模拟componentDidUpdate
  useEffect(() => {
    getList(current)
  }, [update])

  // 分页
  const onChange = (pages) => {
    getList(pages);
  }

  // 删除
    // ArticleApi(
    //   {params:{
    //     page:1,
    //     size:5
    //   }}
    // )
    // .then(res=>{
    //     if(res.code===200){
    //         const datas=res.data.list
    //         function list(){
    //         return(
    //             <ul>
    //                 {
    //                     datas.map((datas,index)=>{
    //                        return <li key={index} className="liborder" id={index}>
    //                                 <a onClick={() => navigate('/index/view'+(datas.id))}><h3>{datas.title}</h3>
    //                                 <h4>{datas.summary}</h4>
    //                                 </a>                  
    //                                 <h4>{datas.tags.map((tags,i)=>{
    //                                     return <Tag color={generateMixed()} key={i}>{tags.tagName}</Tag>
    //                                 }   
    //                                     )}
    //                                     </h4>
    //                                 <h4><span> {datas.createDate}</span></h4><p/>
    //                        </li>
                           
    //                     })
    //                 }
    //                 <div align="center">
    //                 <Pagination defaultCurrent={1} total={50} />      
    //                 </div>  
    //             </ul>
                
                
    //         )
    //             }
    //             ReactDOM.render(list(),document.getElementById("articleList"))
    //     }
    //     else{
    //         message.error(res.msg+",即将跳转登录界面")
    //         setTimeout(()=>navigate('/login'),1500)
    //     }
    // })
    return( <div id='articleList'>
          <div style={{ padding: '20px' }}>
                  <ul>
                    {
                        list.map((datas,index)=>{
                           return <li key={index} className="liborder" id={index}>
                                    <a onClick={() => navigate('/index/view'+(datas.id))}><h3>&emsp;{datas.title}</h3>
                                    <h4>&emsp;&emsp;&emsp;{datas.summary}</h4>
                                    </a>  
                                    <h3><span className='spans'> {datas.createDate}&emsp;&emsp;&emsp;</span></h3>                
                                    <h4>&emsp;&emsp;{datas.tags.map((tags,i)=>{
                                        return <Tag color={generateMixed()} key={i}>{tags.tagName}</Tag>
                                    }   
                                        )}
                                        </h4>
                                    <p/>
                                    
                           </li>
                           
                        })
                    }
                    <div align="center">
                    <Pagination style={{marginTop: '20px'}} onChange={onChange} total={total} current={current}  pageSize={pageSize} />   
                    </div>  
                </ul>
      
    </div>
            </div>)

    
}
  
  